import React from "react";
import { withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import { timesago } from "../../../utils/index";
import { Tag, Empty } from "antd";
import {
  EyeOutlined,
  CloudSyncOutlined,
  SoundOutlined,
  SnippetsOutlined
} from "@ant-design/icons";
import "./articleImg.less";
const HorizontalCard: React.FunctionComponent<any> = (props): any => {
  const { articalInfo } = props;

  return (
    <div className="HorizontalCardBox">
      <div className="leftImg">
        {articalInfo.articleImg.length > 3 ? (
          <img src={articalInfo.articleImg} alt="" />
        ) : (
          <Empty description="暂无图片" />
        )}
      </div>
      <div className="rightInfo">
        <p>名称：{articalInfo.title}</p>
        <p>专题：{articalInfo.shareTopicTitle}</p>
        <p className="introduce">简介：{articalInfo.introduce?articalInfo.introduce:"暂无"}</p>
        <p className="articalContent">
          内容概述：{articalInfo.article_content}
        </p>
        {/* <p>创建时间：{articalInfo.addTime}</p>
        <p>更新时间：{articalInfo.updateTime}</p> */}
        <div className="footerInfo">
          <Tag
            className="articalTage"
            color="processing"
          >
            创建时间：{new Date(articalInfo.addTime).toLocaleDateString()} 
          </Tag>
          <Tag
            className="articalTage"
            color="processing"
          >
            更新时间：{new Date(articalInfo.updateTime).toLocaleDateString()}
          </Tag>
          <Tag
            className="articalTage"
            color="processing"
          >
            更新于：{timesago(articalInfo.updateTime)}
          </Tag>
          <Tag
            className="articalTage"
            color="processing"
          >
            浏览量：{(articalInfo.view_count)}
          </Tag>
        </div>
      </div>
    </div>
  );
};
HorizontalCard.propTypes = {
  articalInfo: PropTypes.object
};
HorizontalCard.defaultProps = {
  articalInfo: {}
};
export default withRouter(HorizontalCard);
